<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import dialogBg from '@/assets/bit-screen/schedule-mge/dialog-bg.png'
import dialogBg2 from '@/assets/bit-screen/schedule-mge/dialog-bg2.png'

withDefaults(
  defineProps<{
    title?: string
    status: string
  }>(),
  {
    title: '模式切换',
    status: 'modelChange'
  }
)
interface RuleForm {
  long: number | null
  lat: number | null
  height: number | null
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  long: null,
  lat: null,
  height: null
})
// const rules = reactive<FormRules<RuleForm>>({
//   long: [
//     { required: true, message: '', trigger: 'blur' },
//     { min: 3, max: 5, message: '', trigger: 'blur' }
//   ],
//   lat: [
//     { required: true, message: 'Please input Activity name', trigger: 'blur' },
//     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
//   ],
//   height: [
//     { required: true, message: 'Please input Activity name', trigger: 'blur' },
//     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
//   ]
// })
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const dialogVisible = ref(false)
const show = () => {
  dialogVisible.value = true
}
const hide = () => {
  dialogVisible.value = false
}
const value = ref('Option1')

const options = [
  {
    value: 'Option1',
    label: '红外'
  },
  {
    value: 'Option2',
    label: '可见光'
  }
]
const handleConfirm = () => {
  hide()
}
defineExpose({
  show,
  hide
})
</script>

<template>
  <div class="dialog-box">
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :modal="false"
      :style="{
        backgroundImage: status === 'modelChange' ? `url(${dialogBg})` : `url(${dialogBg2})`,
        width: status === 'modelChange' ? '334px !important' : '359px !important',
        height: status === 'modelChange' ? '206px !important' : '320px !important'
      }"
    >
      <el-select
        v-if="status === 'modelChange'"
        v-model="value"
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div v-else>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="经度：" prop="long">
            <el-input maxlength="20" v-model="ruleForm.long" />
          </el-form-item>
          <el-form-item label="纬度：" prop="lat">
            <el-input maxlength="20" v-model="ruleForm.lat" />
          </el-form-item>
          <el-form-item label="高度：" prop="height">
            <el-input maxlength="20" v-model="ruleForm.height" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-dialog) {
  left: 10% !important;
  width: 334px !important;
  padding: 25px 25px 20px;
  background-size: cover;
  background-repeat: no-repeat;
  --el-dialog-bg-color: none;
  color: white !important;
  border: none !important;
  box-shadow: none;
  background: none;
  background-size: contain;
  background-repeat: no-repeat
}
:deep(.el-dialog__header) {
  padding-bottom: 27px;
}
:deep(.el-select__wrapper) {
  background-color: rgba(255, 255, 255, 0) !important;
  border: 1px solid #3D6FB9;
}
:deep(.el-select__placeholder) {
  color: white !important;
}

:deep(.el-dialog__title) {
  color: white;
  color: #F1F1F0;
  font-weight: 500;
  text-shadow:   
                0 0 5px rgba(255, 255, 255, 0.5), /* 第一层阴影，较小的模糊半径 */  
                0 0 15px rgba(29, 128, 224, 0.5), /* 第三层阴影，蓝色光晕 */  
                0 0 20px rgba(29, 128, 224, 0.5), /* 第四层阴影，蓝色光晕 */  
                0 0 25px rgba(29, 128, 224, 0.5), /* 第五层阴影，蓝色光晕 */  
                0 0 30px rgba(31, 112, 185, 0.8), /* 第六层阴影，蓝色光晕 */  
                0 0 100px rgba(31, 112, 185, 0.8); /* 第六层阴影，蓝色光晕 */  
        
}
:deep(.el-button.el-button--default) {
  background: none;
  box-shadow: 0px 0px 13px 0px rgba(6, 79, 143, 0.35);
  border-radius: 4px;
  background: linear-gradient(-90deg, rgba(59,145,243,0.12), rgba(57,144,241,0.12));
  box-shadow: 0px 0px 13px 0px rgba(6,79,143,0.35);
  border: none;
  color: #F1F1F0;
}
:deep(.el-button:hover){
  // border: 1px solid white
}
:deep(.el-button.el-button--primary) {
  background-color: #3c75d7 !important;
  box-shadow: 0px 0px 13px 0px rgba(6, 79, 143, 0.35);
  border-radius: 4px;
}
:deep(.el-form-item__label) {
  color: #F1F1F0 !important;
}

:deep(.el-input) {
  border: none;
}
:deep(.el-input__wrapper) {
  border: 1px solid #3d6fb9;
  background: rgba(16,43,76,0.45);

}
:deep(.el-input__inner){
  background: rgba(16,43,76,0.45);
  color: white;
}
.dialog-box {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer {
  margin-top: 10px;
}
@media screen and (max-width: 1600px) {
  :deep(.el-dialog) {
    left: 5% !important;
    width: 334px !important;
  }
}
</style>
